<nz-spin [nzSpinning]="isSpinning">
  <form nz-form [formGroup]="validateForm">
    <!--<div nz-form-item nz-row>-->
    <!--<div nz-form-label nz-col [nzSpan]="9">-->
    <!--<label nz-form-item-required>用户名</label>-->
    <!--</div>-->
    <!--<div nz-col [nzSpan]="8" nz-form-control nzHasFeedback [nzValidateStatus]="getFormControl('userCode')">-->
    <!--<nz-input formControlName="userCode" [nzType]="'text'" [nzPlaceHolder]="'请设置用户名(数字、字母或数字结合)'" [nzSize]="'large'" [(ngModel)]="personalBean.userCode">-->
    <!--</nz-input>-->
    <!--<div nz-form-explain *ngIf="getFormControl('userCode').dirty&&getFormControl('userCode').hasError('required')">用户名不能为空!</div>-->
    <!--<div nz-form-explain *ngIf="getFormControl('userCode').dirty&&getFormControl('userCode').pending">此用户名无效</div>-->
    <!--</div>-->
    <!--</div>-->
    <ng-container *ngIf="showPS">
      <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSpan]="9">
          <label nz-form-item-required>登录名</label>
        </div>
        <div nz-col [nzSpan]="8" nz-form-control nzHasFeedback [nzValidateStatus]="getFormControl('userCode')">
          <nz-input formControlName="userCode" [nzType]="'text'" [nzPlaceHolder]="'请设置用户名(数字、字母或数字结合)'" [nzSize]="'large'"
            [(ngModel)]="personalBean.userCode">
          </nz-input>
          <div nz-form-explain *ngIf="getFormControl('userCode').dirty&&getFormControl('userCode').hasError('required')">用户名不能为空!</div>
          <div nz-form-explain *ngIf="getFormControl('userCode').dirty&&getFormControl('userCode').pending">此用户名无效</div>
        </div>
      </div>
      <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSpan]="9">
          <label for="password" nz-form-item-required>密码</label>
        </div>
        <div nz-form-control nz-col [nzSpan]="8" nzHasFeedback [nzValidateStatus]="getFormControl('password')">
          <nz-input [nzSize]="'large'" formControlName="password" [nzPlaceHolder]="'请设置密码'" [nzType]="'password'"
            [nzId]="'password'" (ngModelChange)="updateConfirmValidator()" [(ngModel)]="personalBean.password"></nz-input>
          <div nz-form-explain *ngIf="getFormControl('password').dirty&&getFormControl('password').hasError('required')">密码不能为空!</div>
        </div>
      </div>
      <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSpan]="9">
          <label for="checkPassword" nz-form-item-required>确认密码</label>
        </div>
        <div nz-form-control nz-col [nzSpan]="8" nzHasFeedback [nzValidateStatus]="getFormControl('checkPassword')">
          <nz-input [nzSize]="'large'" formControlName="checkPassword" [nzPlaceHolder]="'请再次确认密码'" [nzType]="'password'"
            [nzId]="'checkPassword'"></nz-input>
          <div nz-form-explain *ngIf="getFormControl('checkPassword').dirty&&getFormControl('checkPassword').hasError('required')">请再次输入密码!</div>
          <div nz-form-explain *ngIf="getFormControl('checkPassword').dirty&&getFormControl('checkPassword').hasError('confirm')">两次密码输入不一致!</div>
        </div>
      </div>
    </ng-container>
    <div nz-form-item nz-row>
      <div nz-form-label nz-col [nzSpan]="9">
        <label for="userName" nz-form-item-required>用户姓名</label>
      </div>
      <div nz-form-control nz-col [nzSpan]="8" nzHasFeedback [nzValidateStatus]="getFormControl('userName')">
        <nz-input [nzSize]="'large'" formControlName="userName" [nzPlaceHolder]="'请输入用户真实姓名'" [nzType]="'userName'"
                  [nzDisabled]="false" [nzId]="'userName'" [(ngModel)]="personalBean.userName"></nz-input>
        <div nz-form-explain *ngIf="getFormControl('userName').dirty&&getFormControl('userName').hasError('required')">用户姓名不能为空!</div>
      </div>
    </div>
    <div nz-form-item nz-row>
      <div nz-form-label nz-col [nzSpan]="9">
        <label for="partyId" nz-form-item-required>单位全称</label>
      </div>
      <div nz-form-control nz-col [nzSpan]="8" nzHasFeedback [nzValidateStatus]="getFormControl('partyId')">
        <!--<nz-input [nzSize]="'large'" formControlName="partyId" [nzPlaceHolder]="'请输入单位全称'" [nzType]="'partyId'" [nzId]="'partyId'"-->
        <!--[(ngModel)]="personalBean.partyId"></nz-input>-->
        <nz-select nzAllowClear [nzPlaceHolder]="'请选择'" [nzShowSearch]="true" formControlName="partyId" [nzSize]="'large'"
          [nzDisabled]="true" (nzOpenChange)="partyListChange()" [(ngModel)]="personalBean.partyId" name="partyId">
          <nz-option *ngFor="let item of partyList" [nzLabel]="item.partyName" [nzValue]="item.partyId"></nz-option>
        </nz-select>
        <div nz-form-explain *ngIf="getFormControl('partyId').dirty&&getFormControl('partyId').hasError('required')">单位全称不能为空!</div>
      </div>
    </div>
    <!--<div *ngIf="!showPS" nz-form-item nz-row>-->
      <!--<div nz-form-label nz-col [nzSpan]="9">-->
        <!--<label for="roleTypeId">角色类型</label>-->
      <!--</div>-->
      <!--<div nz-form-control nz-col [nzSpan]="8" nzHasFeedback [nzValidateStatus]="getFormControl('roleTypeId')">-->
        <!--&lt;!&ndash;<nz-input [nzSize]="'large'" formControlName="partyId" [nzPlaceHolder]="'请输入单位全称'" [nzType]="'partyId'" [nzId]="'partyId'"&ndash;&gt;-->
        <!--&lt;!&ndash;[(ngModel)]="personalBean.partyId"></nz-input>&ndash;&gt;-->
        <!--<nz-select nzAllowClear [nzPlaceHolder]="'请选择'" [nzShowSearch]="true" formControlName="roleTypeId" [nzSize]="'large'"-->
          <!--(nzOpenChange)="roleTypeChange()" [(ngModel)]="personalBean.roleTypeId" name="roleTypeId">-->
          <!--<nz-option *ngFor="let item of roleTypeList" [nzLabel]="item.roleTypeName" [nzValue]="item.id+''"></nz-option>-->
        <!--</nz-select>-->
        <!--<div nz-form-explain *ngIf="getFormControl('roleTypeId').dirty&&getFormControl('roleTypeId').hasError('required')">角色类型不能为空!</div>-->
      <!--</div>-->
    <!--</div>-->

    <div *ngIf="showPS" nz-form-item nz-row>
      <div nz-form-label nz-col [nzSpan]="9">
        <label for="roleId" nz-form-item-required>用户类型</label>
      </div>
      <div nz-form-control nz-col [nzSpan]="8" nzHasFeedback [nzValidateStatus]="getFormControl('roleId')">
        <nz-select nzAllowClear [nzPlaceHolder]="'请选择'" [nzShowSearch]="true" formControlName="roleId" [nzSize]="'large'"
                   [(ngModel)]="personalBean.roleId" name="roleId">
          <nz-option *ngFor="let item of _useroptions" [nzLabel]="item.roleName" [nzValue]="item.id+''"></nz-option>
        </nz-select>
        <div nz-form-explain *ngIf="getFormControl('roleId').dirty&&getFormControl('roleId').hasError('required')">用户类型不能为空!</div>
      </div>
    </div>

    <div *ngIf="!showPS" nz-form-item nz-row>
      <div nz-form-label nz-col [nzSpan]="9">
        <label for="roleId">用户类型</label>
      </div>
      <div nz-form-control nz-col [nzSpan]="8" nzHasFeedback [nzValidateStatus]="getFormControl('roleId')">
        <nz-select nzAllowClear [nzPlaceHolder]="'请选择'" [nzShowSearch]="true" formControlName="roleId" [nzSize]="'large'" (nzOpenChange)="ChangType(this)"
                   [(ngModel)]="personalBean.roleId" name="roleId">
          <nz-option *ngFor="let item of _useroptions" [nzLabel]="item.roleName" [nzValue]="item.id+''"></nz-option>
        </nz-select>
        <div nz-form-explain *ngIf="getFormControl('roleId').dirty&&getFormControl('roleId').hasError('required')">用户类型不能为空!</div>
      </div>
    </div>

    <div nz-form-item nz-row>
      <div nz-form-label nz-col [nzSpan]="9">
        <label for="cardType">用户持证类型</label>
      </div>
      <div nz-form-control nz-col [nzSpan]="8" nzHasFeedback [nzValidateStatus]="getFormControl('cardType')">
        <nz-select nzAllowClear [nzPlaceHolder]="'请选择'" [nzShowSearch]="true" formControlName="cardType" [nzSize]="'large'"
          [nzMode]="'multiple'" [(ngModel)]="cardType" name="cardType">
          <nz-option *ngFor="let v of _cardTypeoption" [nzLabel]="v.label" [nzValue]="v.value"></nz-option>
        </nz-select>
        <div nz-form-explain *ngIf="getFormControl('cardType').dirty&&getFormControl('cardType').hasError('required')">用户持证类型不能为空!</div>
      </div>
    </div>
    <div nz-form-item nz-row>
      <div nz-form-label nz-col [nzSpan]="9">
        <label for="cardTypeNumber">证件号</label>
      </div>
      <div nz-form-control nz-col [nzSpan]="8" nzHasFeedback [nzValidateStatus]="getFormControl('cardTypeNumber')">
        <nz-input [nzSize]="'large'" formControlName="cardTypeNumber" [nzPlaceHolder]="'多个证件号的，请以逗号隔开'" [nzType]="'cardTypeNumber'"
          [nzId]="'cardTypeNumber'" [(ngModel)]="personalBean.cardTypeNumber"></nz-input>
        <div nz-form-explain *ngIf="getFormControl('cardTypeNumber').dirty&&getFormControl('cardTypeNumber').hasError('required')">证件号不能为空!</div>
      </div>
    </div>
    <div nz-form-item nz-row>
      <div nz-form-label nz-col [nzSpan]="9">
        <label for="cardNumber" nz-form-item-required>身份证号码</label>
      </div>
      <div nz-form-control nz-col [nzSpan]="8" nzHasFeedback [nzValidateStatus]="getFormControl('cardNumber')">
        <nz-input [nzSize]="'large'" formControlName="cardNumber" [nzPlaceHolder]="'请输入身份证号码'" [nzType]="'cardNumber'"
          [nzId]="'cardNumber'" [(ngModel)]="personalBean.cardNumber"></nz-input>
        <div nz-form-explain *ngIf="getFormControl('cardNumber').dirty&&getFormControl('cardNumber').hasError('required')">身份证号码不能为空!</div>
      </div>
    </div>
    <div *ngIf="showPS" nz-form-item nz-row>
      <div nz-form-label nz-col [nzSpan]="9">
        <label for="workNumber" nz-form-item-required>工号</label>
      </div>
      <div nz-form-control nz-col [nzSpan]="8" nzHasFeedback [nzValidateStatus]="getFormControl('workNumber')">
        <nz-input [nzSize]="'large'" formControlName="workNumber" [nzPlaceHolder]="'请输入工号'" [nzType]="'workNumber'"
          [nzId]="'workNumber'" [(ngModel)]="personalBean.workNumber"></nz-input>
        <div nz-form-explain *ngIf="getFormControl('workNumber').dirty&&getFormControl('workNumber').hasError('required')">工号不能为空!</div>
      </div>
    </div>
    <!-- <div nz-form-item nz-row>
      <div nz-form-label nz-col [nzSpan]="9">
        <label for="mobile" nz-form-item-required>办公电话</label>
      </div>
      <div nz-form-control nz-col [nzSpan]="8" nzHasFeedback  [nzValidateStatus]="getFormControl('mobile')">
        <nz-input [nzSize]="'large'" formControlName="mobile" [nzPlaceHolder]="'请输入办公电话'" [nzType]="'mobile'" [nzId]="'mobile'" [(ngModel)]="personalBean.mobile"></nz-input>
      </div>
    </div> -->
    <div nz-form-item nz-row>
      <div nz-form-label nz-col [nzSpan]="9">
        <label for="mobile">办公电话</label>
      </div>
      <div nz-form-control nz-col [nzSpan]="8" nzHasFeedback>
        <nz-input name="mobile" [nzId]="'mobile'" formControlName="mobile" [nzSize]="'large'" [(ngModel)]="personalBean.mobile"></nz-input>
      </div>
    </div>
    <div nz-form-item nz-row>
      <div nz-form-label nz-col [nzSpan]="9">
        <label for="phone">手机号码</label>
      </div>
      <div nz-form-control nz-col [nzSpan]="8" nzHasFeedback>
        <nz-input name="phone" [nzId]="'phone'" formControlName="phone" [nzSize]="'large'" [(ngModel)]="personalBean.phone"></nz-input>
        <div nz-form-explain *ngIf="getFormControl('phone').dirty&&getFormControl('phone').hasError('required')">手机号码不能为空!</div>
      </div>
    </div>
    <div nz-form-item nz-row>
      <div nz-form-label nz-col [nzSpan]="9">
        <label for="email">E-mail</label>
      </div>
      <div nz-form-control nz-col [nzSpan]="8" nzHasFeedback [nzValidateStatus]="getFormControl('email')">
        <nz-input [nzSize]="'large'" formControlName="email" [nzPlaceHolder]="'请输入E-mail'" [nzType]="'email'" [nzId]="'email'"
          [(ngModel)]="personalBean.email"></nz-input>
        <div nz-form-explain *ngIf="getFormControl('email').dirty&&getFormControl('email').hasError('required')">E-mail不能为空!</div>
      </div>
    </div>
    <div nz-form-item nz-row>
      <div nz-form-label nz-col [nzSpan]="9">
        <label>资质证书</label>
      </div>
      <div nz-form-control nz-col [nzSm]="8" [nzXs]="24" nzHasFeedback>
        <nz-upload nzAction="{{config.IP+config.API.upload}}" nzListType="picture-card" [(nzFileList)]="fileList"
          [nzPreview]="handlePreview" [nzRemove]="nzRemoveFile" (nzChange)="handleChange($event)">
          <i class="anticon anticon-plus"></i>
          <div class="ant-upload-text">上传</div>
        </nz-upload>
        <nz-modal [nzVisible]="previewVisible" [nzContent]="modalContent" [nzFooter]="null" (nzOnCancel)="previewVisible=false">
          <ng-template #modalContent>
            <img [src]="previewImage" [ngStyle]="{ 'width': '100%' }" />
          </ng-template>
        </nz-modal>
      </div>
    </div>


    <div nz-form-item nz-row>
      <div nz-form-label nz-col [nzSpan]="9">
        <label>社保证明</label>
      </div>
      <div nz-form-control nz-col [nzSm]="8" [nzXs]="24" nzHasFeedback>
        <nz-upload nzAction="{{config.IP+config.API.upload}}" [(nzFileList)]="socialList" [nzShowButton]="true" [nzRemove]="nzSocialRemoveFile" [nzPreview]="handlePreview" (nzChange)="socialHandleChange($event)">
          <button nz-button>
            <i class="anticon anticon-upload"></i><span>上传</span>
          </button>
        </nz-upload>
      </div>
    </div>

    <div nz-form-item nz-row>
      <div nz-form-label nz-col [nzSpan]="9">
        <label for="firstgtshow">初次取证时间</label>
      </div>
      <div nz-form-control nz-col [nzSpan]="8" nzHasFeedback [nzValidateStatus]="getFormControl('firstgtshow')">
        <nz-datepicker style="min-width:200px" [nzDisabled]="false" formControlName="firstgtshow" [nzSize]="'large'"
          [nzFormat]="'YYYY-MM-DD'" [(ngModel)]="personalBean.firstgt" name="firstgt" [nzPlaceHolder]="'初次取证时间'"></nz-datepicker>
      </div>
    </div>

    <!-- 上传签名图片-->
    <div nz-form-item nz-row *ngIf="personalBean.roleId == '8' || personalBean.roleId == '19'">
      <div nz-form-label nz-col [nzSpan]="9">
        <label nz-form-item-required>签名图片</label>
      </div>
      <div nz-form-control nz-col [nzSm]="8" [nzXs]="8">
        <nz-upload nzAction="{{config.IP+config.API.upload}}" nzListType="picture-card" [(nzFileList)]="signImg"
                   [nzShowButton]="signImg.length < 1" [nzRemove]="nzRemoveFile1" [nzPreview]="handlePreview"
                   (nzChange)="handleChange($event)">
          <i class="anticon anticon-plus"></i>
          <div class="ant-upload-text">上传</div>
        </nz-upload>
        <nz-modal [nzVisible]="previewVisible" [nzContent]="modalContent" [nzFooter]="null" (nzOnCancel)="previewVisible=false">
          <ng-template #modalContent>
            <img [src]="previewImage" [ngStyle]="{ 'width': '100%' }" />
          </ng-template>
        </nz-modal>
      </div>
    </div>

    <div nz-form-item nz-row style="margin-bottom:8px;">
      <div nz-form-control nz-col [nzSpan]="14" [nzOffset]="10">
        <button nz-button [nzSize]="'large'" [nzType]="'primary'" (click)="submitForm($event)">修改</button>
      </div>
    </div>
  </form>
</nz-spin>
